<!--
 * @Author: your name
 * @Date: 2020-05-06 06:48:56
 * @LastEditTime: 2020-05-16 00:13:06
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \source\pages\code\database\index.vue
 -->
<template>
  <div class="flex dbmain">
    <div class="db w200 ml10 flex">
      <div class="top">
        <h3 class="ph2">
          数据库
          <div class="fr">
            <Dropdown @on-click="setLink">
              <Button icon="ios-arrow-down" title="切换连接" size="small"></Button>
              <DropdownMenu slot="list">
                <DropdownItem
                  v-for="li in links"
                  :key="li.id"
                  :name="li.id"
                  :selected="li.id==linkId"
                >
                  {{li.name}}
                  <Tag>{{li.dbType}}</Tag>
                </DropdownItem>
              </DropdownMenu>
            </Dropdown>
            <Button icon="md-add" to="/set/link" title="链接管理" size="small"></Button>
          </div>
        </h3>
        <div class="p1">
          <Input placeholder="快速查询" v-model="keys" clearable>
            <a slot="append" @click="load">
              <Icon type="md-sync" />
            </a>
          </Input>
        </div>
      </div>
      <div class="tables fg1">
        <ul>
          <li
            v-for="(li,i) in curTables"
            :class="{on:li.on}"
            @click="tableInfo(li.name,li)"
            :title="li.description"
          >{{li.DbObjectType}} {{li.name}}</li>
        </ul>
      </div>
    </div>
    <div class="fg1">
      <div class="table">
        <Form :model="dto" :label-width="60">
          <Row>
            <Col :span="4">
              <FormItem label="数据库">
                <Input v-model="dto.dbFullName" disabled></Input>
              </FormItem>
            </Col>
            <Col :span="4">
              <FormItem label="表名">
                <Input v-model="dto.dbTableName" placeholder="请输入表名"></Input>
              </FormItem>
            </Col>
            <Col :span="4">
              <FormItem label="备注">
                <Input v-model="dto.tableDescription" placeholder="请输入表备注">
                  <Button slot="append" @click="updateTableNote">更新</Button>
                </Input>
              </FormItem>
            </Col>
            <Col :span="4">
              <FormItem>
                <!-- <Button @click="save">保存</Button> -->
                <Button @click="importTable" type="primary">导入实体</Button>
              </FormItem>
            </Col>
          </Row>
        </Form>
      </div>
      <Table :columns="columns" :data="list" border></Table>
    </div>
  </div>
</template>

<script>
import Api from "./api";
export default {
  data() {
    return {
      links: [],
      linkId: "",
      keys: "",
      dto: {},
      dbs: [],
      tables: [],
      columns: [
        // { key: "tableName", title: "tableName" },
        // { key: "tableId", title: "tableId" },
        { key: "dbColumnName", title: "列名" },
        // { key: "propertyName", title: "propertyName" },
        { key: "dataType", title: "数据类型" },
        // { key: "propertyType", title: "propertyType" },
        { key: "length", title: "长度" },
        { key: "columnDescription", title: "备注" },
        { key: "defaultValue", title: "默认值" },
        { key: "isNullable", title: "可空" },
        { key: "isIdentity", title: "自增键" },
        { key: "isPrimarykey", title: "主键" }
        // { key: "value", title: "value" },
        // { key: "decimalDigits", title: "精度" },
        // { key: "scale", title: "范围" }
      ],
      list: [],
      txt: ""
    };
  },
  components: {},
  created() {
    this.linkId = localStorage.getItem("linkId");
    this.loadLinks();
  },
  mounted() {
    this.load();
  },
  methods: {
    loadLinks() {
      Api.getLinks().then(r => {
        this.links = r.result;
      });
    },
    load() {
      Api.getTables().then(r => {
        this.tables = r.result;
      });
    },
    setLink(id) {
      this.linkId = id;
      localStorage.setItem("linkId", id);
      this.load();
    },
    tableInfo(name, li) {
      this.tables.map(u => {
        u.on = u.name == name;
      });
      this.dto.dbTableName = name;
      this.dto.entityName = name;
      this.dto.tableDescription=li.description;
      Api.getColumnInfos({ name: name }).then(r => {
        var list = r.result;
        this.list = list;
      });
    },
    updateTableNote(){
      if(this.dto.tableDescription==""||!this.dto.tableDescription){
        this.$Message.error("表备注不能为空");
        return;
      }
      Api.addTableRemark({
        name:this.dto.dbTableName,
        description:this.dto.tableDescription
      });
    },
    save() {
      this.dto.columns = this.list;
      this.dto.dbFullName = "fdsafasfasf";
      this.dto.entityName = this.dto.dbTableName;
      Api.createTable(this.dto).then(r => {
        if (r.success) {
          this.$Notice.success(r.result + "");
        }
      });
    },
    importTable(){
      Api.tableImport({
        tableName:this.dto.dbTableName,
        linkId:this.linkId
      }).then(r=>{
        if(r.success){
          this.$Message.success("导入成功！")
        }
      })
    }
  },
  computed: {
    curTables() {
      return this.tables.filter(u => {
        return u.name.indexOf(this.keys) != -1;
      });
    }
  }
};
</script>

<style lang="less">
.dbmain {
  height: calc(100vh - 120px);
  .w200 {
    width: 280px;
    border: 1px solid #ddd;
    flex-shrink: 0;
    margin-right: 10px;
    background-color: white;
  }
  .top {
    flex-shrink: 0;
    h3 {
      line-height: 40px;
      background-color: #f8f8f9;
    }
  }
  .tables {
    overflow: auto;
    flex-shrink: 0;
    ul {
      > li {
        line-height: 35px;
        cursor: pointer;
        padding-left: 10px;
      }
      > li:hover,
      .on {
        color: #2d8cf0;
        background-color: #f0faff;
        border-right: 2px solid #2d8cf0;
        border-bottom: 1px solid #ddd;
      }
    }
  }
  .tableInfo {
    width: 100%;
  }
}
</style>
